<template>
  <div class="router-panel">
    <div class="box">
      <div class="body" v-loading="Loading">
        <div class="form">
          <el-empty v-if="isShow === 'null'" :image-size="200" description="暂无数据" class="notranslate"></el-empty>
          <el-form v-else-if="isShow === 'data'" :model="Form" :rules="Rules" ref="Form" label-position="right"
            :disabled="type == 'view'" label-width="6.25rem" class="demo-ruleForm">
            <el-descriptions title="基本信息" :column="Column" size="small" border>
              <!-- 公司编号 -->
              <el-descriptions-item v-if="type != 'add'">
                <el-form-item label="供应商编号：" slot="label"></el-form-item>
                <el-form-item prop="supplierId">
                  <b class="supplierId">{{ Form.supplierId }}</b>
                </el-form-item>
              </el-descriptions-item>
              <!-- 收款信息 -->
              <!-- <el-descriptions-item>
                <el-form-item label="收款信息" :rules="[{ required: true }]" slot="label"></el-form-item>
                <el-form-item prop="supplierPayoutInformation">
                  <el-input v-model="Form.supplierPayoutInformation" size="medium" placeholder="请输入收款信息"
                    clearable></el-input>
                </el-form-item>
              </el-descriptions-item> -->

              <!-- 供应商业务范畴 -->
              <el-descriptions-item>
                <el-form-item label="供应商业务范畴：" slot="label"></el-form-item>
                <el-form-item prop="supplierBusinessScope">
                  <el-input v-model="Form.supplierBusinessScope" size="medium" placeholder="请输入供应商业务范畴"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <!-- 微信号 -->
              <el-descriptions-item>
                <el-form-item label="微信号：" slot="label"></el-form-item>
                <el-form-item prop="supplierWechat">
                  <el-input v-model="Form.supplierWechat" size="medium" placeholder="请输入微信号"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <!-- 微信号 -->
              <el-descriptions-item>
                <el-form-item label="微信名：" slot="label"></el-form-item>
                <el-form-item prop="supplierWechatName">
                  <el-input v-model="Form.supplierWechatName" size="medium" placeholder="请输入微信名"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <!-- 业务总计金额 -->
              <el-descriptions-item>
                <el-form-item label="业务总计金额：" slot="label"></el-form-item>
                <el-form-item prop="supplierBusinessTotalAmount">
                  <el-input v-model="Form.supplierBusinessTotalAmount" size="medium" placeholder="业务总计金额"></el-input>
                </el-form-item>
              </el-descriptions-item>


              <!-- 公司名称 -->
              <el-descriptions-item>
                <el-form-item label="公司名称：" slot="label"></el-form-item>
                <el-form-item prop="supplierCompanyName">
                  <el-input v-model="Form.supplierCompanyName" size="medium" placeholder="请输入公司名称"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <!-- 老板名字 -->
              <el-descriptions-item>
                <el-form-item label="老板名字：" slot="label"></el-form-item>
                <el-form-item prop="supplierOwnerName">
                  <el-input v-model="Form.supplierOwnerName" size="medium" placeholder="请输入老板名字"></el-input>
                </el-form-item>
              </el-descriptions-item>

              <!-- 手机号 -->
              <el-descriptions-item>
                <el-form-item label="手机号：" slot="label"></el-form-item>
                <el-form-item prop="supplierPhoneNumber">
                  <el-input v-model="Form.supplierPhoneNumber" size="medium" placeholder="请输入手机号"></el-input>
                </el-form-item>
              </el-descriptions-item>

              <!-- 公司开设年限 -->
              <el-descriptions-item>
                <el-form-item label="公司开设年限：" slot="label"></el-form-item>
                <el-form-item prop="supplierYearsOperation">
                  <el-input v-model="Form.supplierYearsOperation" size="medium" placeholder="请输入公司开设年限"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <!-- 打号地区 -->
              <el-descriptions-item>
                <el-form-item label="地区：" slot="label"></el-form-item>
                <el-form-item prop="supplierRegion">
                  <el-input v-model="Form.supplierRegion" size="medium" placeholder="请输入地区"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <!-- 供应商备注 -->
              <el-descriptions-item>
                <el-form-item label="供应商备注：" slot="label"></el-form-item>
                <el-form-item prop="remark">
                  <el-input v-model="Form.remark" size="medium" placeholder="请输入供应商备注"></el-input>
                </el-form-item>
              </el-descriptions-item>

              <el-descriptions-item>
                <el-form-item label="收款人是否是公司法人或股东：" slot="label"></el-form-item>
                <el-form-item prop="supplierPayeeIsLegalPersonsOrShareholder">
                  <el-radio-group v-model="Form.supplierPayeeIsLegalPersonsOrShareholder">
                    <el-radio v-for="item in dict.sys_yes_no" :key="item.dictValue" :label="item.dictValue">
                      {{ item.dictLabel }}
                    </el-radio>

                  </el-radio-group>
                </el-form-item>

              </el-descriptions-item>
              <el-descriptions-item>
                <el-form-item label="支付宝是否是本人认证：" slot="label"></el-form-item>
                <el-form-item prop="supplierAlipayIsIdentityVerification">
                  <el-radio-group v-model="Form.supplierAlipayIsIdentityVerification">
                    <el-radio v-for="item in dict.sys_yes_no" :key="item.dictValue" :label="item.dictValue">
                      {{ item.dictLabel }}
                    </el-radio>

                  </el-radio-group>
                </el-form-item>


              </el-descriptions-item>
              <el-descriptions-item>
                <el-form-item label="是否支持上门：" slot="label"></el-form-item>
                <el-form-item prop="supplierIsVisitable">
                  <el-radio-group v-model="Form.supplierIsVisitable">
                    <el-radio v-for="item in dict.sys_yes_no" :key="item.dictValue" :label="item.dictValue">
                      {{ item.dictLabel }}
                    </el-radio>

                  </el-radio-group>
                </el-form-item>

              </el-descriptions-item>

            </el-descriptions>
            <el-descriptions title="收款信息" :column="Column" size="small" border>
              <!-- 银行卡 -->
              <el-descriptions-item>
                <el-form-item label="银行卡：" slot="label"></el-form-item>
                <el-form-item prop="supplierBankCards">
                  <el-input v-model="Form.supplierBankCards" size="medium" placeholder="请输入银行卡"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <!-- 支付宝 -->
              <el-descriptions-item>
                <el-form-item label="支付宝：" slot="label"></el-form-item>
                <el-form-item prop="supplierAlipay">
                  <el-input v-model="Form.supplierAlipay" size="medium" placeholder="请输入支付宝"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <!-- 公户 -->
              <el-descriptions-item>
                <el-form-item label="公户：" slot="label"></el-form-item>
                <el-form-item prop="supplierPublicHouseholds">
                  <el-input v-model="Form.supplierPublicHouseholds" size="medium" placeholder="请输入公户"></el-input>
                </el-form-item>
              </el-descriptions-item>

            </el-descriptions>
            <el-descriptions v-if="type != 'add'" title="业务信息" :column="Column" size="small" border>
              <!-- 业务数量 -->
              <el-descriptions-item>
                <el-form-item label="业务数量：" slot="label"></el-form-item>
                <el-form-item prop="supplierNumberBusiness">
                  <b class="supplierNumberBusiness">{{ supplierBusinessTotal.supplierNumberBusiness }}</b>
                </el-form-item>
              </el-descriptions-item>
              <!-- 业务总利润 -->
              <el-descriptions-item>
                <el-form-item label="业务总利润：" slot="label"></el-form-item>
                <el-form-item prop="supplierBusinessTotalProfit">
                  <b class="supplierBusinessTotalProfit">{{ supplierBusinessTotal.supplierBusinessTotalProfit }}</b>
                </el-form-item>
              </el-descriptions-item>
              <!-- 业务总收入 -->
              <el-descriptions-item>
                <el-form-item label="业务总收入：" slot="label"></el-form-item>
                <el-form-item prop="supplierBusinessTotalIncome">
                  <b class="supplierBusinessTotalIncome">{{ supplierBusinessTotal.supplierBusinessTotalIncome }}</b>
                </el-form-item>
              </el-descriptions-item>

            </el-descriptions>
            <div class="text-center">
              <el-button v-if="type == 'add'" size="small" type="success" @click="add">确认添加</el-button>
              <el-button v-else-if="type == 'edit'" size="small" type="primary" @click="edit">确认修改</el-button>
            </div>
          </el-form>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: [],
  components: {
    'Contract-Table': () => import(/* webpackChunkName: 'contract' */ '@/views/contract/table/contract-table.vue'),

  },
  dicts: ['sys_yes_no'],
  data() {


    return {
      // loading
      Loading: false,
      type: 'add',
      // 显示
      isShow: '',
      Contract_QueryInfo: {

      },
      Table_Maxheight: null,
      supplierBusinessTotal: {
        supplierBusinessTotalProfit: '',
        supplierBusinessTotalIncome: '',
        supplierNumberBusiness: '',
      },
      // 表单
      Form: {
        supplierId: '',
        supplierPayoutInformation: '',
        supplierNumberBusiness: '',
        supplierBusinessScope: '',
        supplierBusinessTotalAmount: '',
        supplierBankCards: '',
        supplierAlipay: '',
        supplierPublicHouseholds: '',

        supplierCompanyName: '',
        supplierWechat: '',
        supplierWechatName: '',
        supplierCompanyId: '',

        supplierOwnerName: '',

        supplierPhoneNumber: '',
        supplierPayeeIsLegalPersonsOrShareholder: '',
        supplierYearsOperation: '',
        supplierAlipayIsIdentityVerification: '',
        supplierRegion: '',
        supplierIsVisitable: '',
        remark: '',

      },

      // 规则
      Rules: {
        clientCompanyName: [{ required: true, message: '公司名称不能为空', trigger: 'change' }],


      },
      // 每行显示个数
      Column: null
    }
  },
  computed: {
    ...mapState([
      'Menu_isCollapse',
      'User_Info',

    ])
  },
  watch: {
    Menu_isCollapse() {
      this.Column = this.getWindowWidth()
      setTimeout(() => this.setTableMaxHegiht(), 300)
    }



  },
  created() {
    this.dict
    this.setValue()
    this.getData()
  },
  mounted() {
    this.Column = this.getWindowWidth()
    $(window).on('resize', () => {
      this.Column = this.getWindowWidth()
    })
    setTimeout(() => this.setTableMaxHegiht())
    $(window).on('resize', () => this.setTableMaxHegiht())
  },
  activated() {
    this.setValue()

    this.Column = this.getWindowWidth()
    this.setTableMaxHegiht()
    $(window).on('resize', () => {
      this.Column = this.getWindowWidth()
    })
  },
  methods: {
    setValue() {
      var { type, supplierId } = this.$route.params
      this.Form.supplierId = supplierId;
      if (!this.$IsNull(type)) {
        this.type = type;
      }


    },
    // 设置表格的最大高度
    setTableMaxHegiht() {
      this.$Util.$emit('setTableMaxHeight')

      var arr = ['.form', '.el-pagination']
      var height = $(window).height() - this.$getGroupHeight(arr) - this.$Data.Table_maxHeight
      this.Table_Maxheight = height
    },
    // 获取窗口宽度
    getWindowWidth() {
      var width = $(window).width()
      switch (this.Menu_isCollapse) {
        case true:
          if (width > 2000) return 5
          else if (width > 1900) return 4
          else if (width > 1100) return 3
          else if (width > 800) return 2
          else return 1
        case false:
          if (width > 2200) return 5
          else if (width > 2100) return 4
          else if (width > 1300) return 3
          else if (width > 950) return 2
          else return 1
      }
    },
    // 获取
    async getData() {
      if (this.type == 'add') {

        return this.isShow = 'data'
      }
      var { supplierId } = this.$route.params
      if (this.$IsNull(supplierId)) return this.isShow = 'null'
      this.Loading = true
      const { data: res } = await this.$api.getSpSupplierPage({
        supplierId: supplierId
      })
      setTimeout(() => {
        this.Loading = false
        if (res.code != 0 || this.$IsNull(res.datas)) return this.isShow = 'null'
        this.isShow = 'data'
        var data = res.datas[0]
        this.Form = {
          supplierId: data.supplierId,
          supplierPayoutInformation: data.supplierPayoutInformation,
          supplierNumberBusiness: data.supplierNumberBusiness,
          supplierBusinessScope: data.supplierBusinessScope,
          supplierBusinessTotalAmount: data.supplierBusinessTotalAmount,
          supplierBankCards: data.supplierBankCards,
          supplierAlipay: data.supplierAlipay,
          supplierPublicHouseholds: data.supplierPublicHouseholds,

          supplierCompanyName: data.supplierCompanyName,

          supplierCompanyId: data.supplierCompanyId,
          supplierWechatName: data.supplierWechatName,
          supplierWechat: data.supplierWechat,

          supplierOwnerName: data.supplierOwnerName,

          supplierPhoneNumber: data.supplierPhoneNumber,
          supplierPayeeIsLegalPersonsOrShareholder: data.supplierPayeeIsLegalPersonsOrShareholder,
          supplierYearsOperation: data.supplierYearsOperation,
          supplierAlipayIsIdentityVerification: data.supplierAlipayIsIdentityVerification,
          supplierRegion: data.supplierRegion,
          supplierIsVisitable: data.supplierIsVisitable,
          remark: data.remark,

        }
        this.supplierBusinessTotal = {
          supplierBusinessTotalProfit: data.supplierBusinessTotalProfit,
          supplierBusinessTotalIncome: data.supplierBusinessTotalIncome,
          supplierNumberBusiness: data.supplierNumberBusiness,
        }
      }, 200)

    },
    // 添加合同
    add() {
      this.$refs.Form.validate(async valid => {
        if (!valid) return this.$Message(null, '必填信息不能为空', 'warning')
        this.$Util.$emit('setLoading', true)
        var form = this.Form;

        const { data: res } = await this.$api.insertSpSupplier(form)
        setTimeout(() => {
          this.$Util.$emit('setLoading', false)
          if (res.code != 0) return this.$Message(res, '添加失败', 'error')
          this.$Message(null, '添加成功', 'success')
          this.removeKeepAlives()
        }, this.$Data.Submit_Time)
      })
    },
    // 修改合同
    edit() {
      this.$refs.Form.validate(async valid => {
        if (!valid) return this.$Message(null, '必填信息不能为空', 'warning')
        this.$Util.$emit('setLoading', true)
        var newForm = { ...this.Form }
        for (var item in newForm) {
          if (this.$IsNull(newForm[item])) newForm[item] = null
        }
        const { data: res } = await this.$api.updateSpSupplierByPrimaryKeyNotNull(newForm)
        setTimeout(() => {
          this.$Util.$emit('setLoading', false)
          if (res.code != 0) return this.$Message(res, '修改失败', 'error')
          this.$Message(null, '修改成功', 'success')
          this.removeKeepAlives()
        }, this.$Data.Submit_Time)
      })
    },
    // 去除缓存
    removeKeepAlives() {
      var { name } = this.$route
      if (this.$IsNull(name)) return
      this.$store.commit('removeMenuList', {
        name: name
      })
      this.$store.commit('removeKeepAlive', {
        name: name
      })
      this.$RouterPush('supplier')
    }
  },
  destroyed() {
    $(window).off()
  },
  deactivated() {
    $(window).off()
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/Box.scss";
@import "@/assets/css/profession/profession/add-edit-profession.scss";

.box .text-center {
  margin-top: 1.75rem !important;
}
</style>
